<template>
  <page-meta :page-style="$theme.pageStyle">
    <!-- #ifndef H5 -->
    <navigation-bar
        :front-color="$theme.navColor"
        :background-color="$theme.navBgColor"
    />
    <!-- #endif -->
  </page-meta>

  <page-bg></page-bg>
  <u-navbar
      :safeAreaInsetTop="false"
      :placeholder="false"
      :is-back="true"
      :is-fixed="true"
      :title="$theme.title"
      :border-bottom="false"
      :title-bold="true"
      :title-color="'#111111'"
      :background="{ background : navBg }"
  >
  </u-navbar>

  <view
      class="login min-h-full flex flex-col items-center px-[60rpx] pt-[120rpx] box-border"
  >
    <view>
      <image
          :src="appStore.getWebsiteConfig.shop_logo?appStore.getWebsiteConfig.shop_logo : '@/static/user/logo.png'"
          mode="widthFix"
          class="w-[160rpx] h-[160rpx] rounded-full"
      />
    </view>
    <view class="mt-[60rpx] font-bold" style="font-size: 40rpx;">欢迎登录升缘阁</view>
    <view class="w-full mt-[80rpx] pb-[60rpx]">
      <!-- #ifdef MP-WEIXIN || H5 -->
      <block v-if="!phoneLogin">
        <view v-if="isOpenOtherAuth && isWeixin && inWxAuth">
          <u-button
              type="primary"
              @click="wxLogin"
              :customStyle="{ height: '100rpx' }"
              hover-class="none"
          >
            用户一键登录
          </u-button>
        </view>
        <!-- #endif -->

        <view class="mt-[40rpx]">
          <u-button
              @click="phoneLogin = !phoneLogin"
              :customStyle="{ height: '100rpx' }"
              hover-class="none"
          >
            手机号登录
          </u-button>
        </view>
      </block>
      <block v-if="phoneLogin">
        <!-- 密码登录 -->
        <template
            v-if="
                        formData.scene == LoginWayEnum.ACCOUNT &&
                        includeLoginWay(LoginWayEnum.ACCOUNT)
                    "
        >
          <view
              class="bg-white px-[18rpx] border border-lightc border-light rounded-[40px] h-[110rpx] items-center flex"
          >
            <view class="pl-[25rpx] pr-[25rpx] border-r border-solid border-0 border-light">
              <u-image class="ml-[13rpx] mr-[13rpx]" width="25rpx" height="25rpx"
                       :src="`${$domain}/static/icons/login/phone.svg`" mode="widthFix"></u-image>
            </view>
            <u-input
                class="flex-1 mx-[20rpx]"
                v-model="formData.mobile"
                :border="false"
                placeholder="请输入您的手机号"
            />
          </view>
          <view
              class="bg-white px-[18rpx] py-[10rpx] border border-light rounded-[40px] flex h-[110rpx] items-center mt-[40rpx]"
          >
            <view class="pl-[25rpx] pr-[25rpx] border-r border-r border-solid border-0 border-light">
              <u-image class="ml-[13rpx] mr-[13rpx]" width="25rpx" height="25rpx"
                       :src="`${$domain}/static/icons/login/password.svg`" mode="widthFix"></u-image>
            </view>

            <u-input
                class="flex-1 mx-[20rpx]"
                v-model="formData.password"
                type="password"
                placeholder="请输入您的密码"
                :border="false"
            />

          </view>
        </template>
        <!-- 验证码登录 -->
        <!--        <template-->
        <!--            v-if="-->
        <!--                        formData.scene == LoginWayEnum.MOBILE &&-->
        <!--                        includeLoginWay(LoginWayEnum.MOBILE)-->
        <!--                    "-->
        <!--        >-->
        <!--          <view-->
        <!--              class="px-[18rpx] border border-solid border-light rounded-[10rpx] h-[100rpx] items-center flex"-->
        <!--          >-->
        <!--            <u-input-->
        <!--                class="flex-1"-->
        <!--                v-model="formData.mobile"-->
        <!--                :border="false"-->
        <!--                placeholder="请输入手机号码"-->
        <!--            />-->
        <!--          </view>-->
        <!--          <view-->
        <!--              class="px-[18rpx] border border-solid border-light rounded-[10rpx] h-[100rpx] items-center flex mt-[40rpx]"-->
        <!--          >-->
        <!--            <u-input-->
        <!--                class="flex-1"-->
        <!--                v-model="formData.code"-->
        <!--                placeholder="请输入验证码"-->
        <!--                :border="false"-->
        <!--            />-->

        <!--            <view-->
        <!--                class="border-l border-solid border-0 border-light pl-3 leading-4 ml-3 w-[180rpx]"-->
        <!--                @click="sendSms"-->
        <!--            >-->
        <!--              <u-verification-code-->
        <!--                  ref="uCodeRef"-->
        <!--                  :seconds="60"-->
        <!--                  @change="codeChange"-->
        <!--                  change-text="x秒"-->
        <!--              />-->
        <!--              <text :class="formData.mobile ? 'text-primary' : 'text-muted'">-->
        <!--                {{ codeTips }}-->
        <!--              </text>-->
        <!--            </view>-->
        <!--          </view>-->
        <!--        </template>-->
      </block>

      <view class="flex mt-[40rpx] flex-row justify-between" v-if="isOpenAgreement">
        <u-checkbox v-model="isCheckAgreement" shape="circle">
          <view class="text-xs flex">
            同意
            <view @click.stop>
              <navigator
                  class="text-primary"
                  hover-class="none"
                  url="/pages/agreement/agreement?type=service"
              >
                《服务协议》
              </navigator>
            </view>

            和
            <view @click.stop>
              <navigator
                  class="text-primary"
                  hover-class="none"
                  url="/pages/agreement/agreement?type=privacy"
              >
                《隐私协议》
              </navigator>
            </view>
          </view>
        </u-checkbox>
        <view>
          <navigator url="/pages/forget_pwd/forget_pwd" hover-class="none">
            <view
                class="text-xs text-color"
            >
              忘记密码？
            </view>
          </navigator>
        </view>

      </view>
      <block v-if="phoneLogin">
        <view class="mt-[60rpx]">
          <u-button
              type="primary"
              shape="circle"
              :hair-linec="false"
              @click="handleLogin(formData.scene)"
              :customStyle="{
                            height: '100rpx',
                            opacity: DisableStyle ? '1' : '0.5',
                            background: `linear-gradient(90deg, #ffb5f7 0%, #ff5acf 99%)`,
                            boxShadow: 'inset 0px 2px 10px 0px rgba(255, 255, 255, 0.4)'
                        }"
              hover-class="none"
          >
            立即登录
          </u-button>
        </view>
        <view class="flex justify-center mt-[20rpx]">
          <view
              v-if="false"
          >已有账号，使用
            <span
                class="text-primary"
                @click="changeLoginWay(LoginWayEnum.ACCOUNT)"
                v-if="
                                formData.scene == LoginWayEnum.MOBILE &&
                                includeLoginWay(LoginWayEnum.ACCOUNT)
                            "
            >密码登录</span
            >
            <span
                class="text-primary"
                @click="changeLoginWay(LoginWayEnum.MOBILE)"
                v-if="
                                formData.scene == LoginWayEnum.ACCOUNT &&
                                includeLoginWay(LoginWayEnum.MOBILE)
                            "
            >验证码登录</span
            >
          </view>
          <navigator style="color: #999;" url="/pages/register/register" hover-class="none"
          >注册账号
          </navigator
          >
        </view>
      </block>
    </view>
    <!-- 协议弹框 -->
    <u-modal
        v-model="showModel"
        show-cancel-button
        :show-title="false"
        confirm-color="var(--color-primary)"
        @confirm=";(isCheckAgreement = true), (showModel = false)"
        @cancel="showModel = false"
    >
      <view class="text-center px-[70rpx] py-[60rpx]">
        <view> 请先阅读并同意</view>
        <view class="flex justify-center">
          <navigator data-theme="" url="/pages/agreement/agreement?type=service">
            <view class="text-primary">《服务协议》</view>
          </navigator>
          和
          <navigator url="/pages/agreement/agreement?type=privacy">
            <view class="text-primary">《隐私协议》</view>
          </navigator>
        </view>
      </view>
    </u-modal>
    <!-- #ifdef MP-WEIXIN -->

    <mplogin-popup
        v-model:show="showLoginPopup"
        :logo="websiteConfig.shop_logo"
        :title="websiteConfig.shop_name"
        @update="handleUpdateUser"
    />
    <!--  #endif -->
  </view>
</template>

<script setup lang="ts">
import {login, mnpLogin, updateUser, OALogin} from '@/api/account'
import {smsSend} from '@/api/app'
import {SMSEnum} from '@/enums/appEnums'
import {BACK_URL} from '@/enums/constantEnums'
import {useLockFn} from '@/hooks/useLockFn'
import {useAppStore} from '@/stores/app'
import {useUserStore} from '@/stores/user'
import {useRouter, useRoute} from 'uniapp-router-next'
import cache from '@/utils/cache'
import {isWeixinClient} from '@/utils/client'
// #ifdef H5
import wechatOa, {UrlScene} from '@/utils/wechat'
// #endif
import {onLoad, onPageScroll, onShow} from '@dcloudio/uni-app'
import {computed, reactive, ref, shallowRef, watch} from 'vue'
import PageBg from "@/components/page-bg/page-bg.vue";

const navBg = ref<string>('#ffebfd')
const titleColor = ref<string>('#fff')

onPageScroll((event: any) => {
  navBg.value = event.scrollTop > 10 ? '#fff' : '#ffebfd'
  titleColor.value = event.scrollTop > 10 ? '#111' : '#fff'
})

enum LoginWayEnum {
  ACCOUNT = 1,
  MOBILE = 2
}

const isWeixin = ref(true)
// #ifdef H5
isWeixin.value = isWeixinClient()
// #endif

const route = useRoute()
const router = useRouter()
const userStore = useUserStore()
const appStore = useAppStore()
const showModel = ref(false)
const uCodeRef = shallowRef()
const codeTips = ref('')
const showLoginPopup = ref(false)
const isCheckAgreement = ref(false)

let terminal = ref(1)


// #ifdef MP-WEIXIN
terminal.value = 1
// #endif

// #ifdef H5
terminal.value = 2
// #endif


const formData:any = ref({
  scene: 1,
  mobile: '',
  password: '',
  code: '',
  terminal: terminal.value
})
const phoneLogin = ref(true)
const loginData = ref()
const codeChange = (text: string) => {
  codeTips.value = text
}

const websiteConfig = computed(() => appStore.getWebsiteConfig)

const sendSms = async () => {
  if (!formData.value.mobile) return
  if (uCodeRef.value?.canGetCode) {
    await smsSend({
      scene: SMSEnum.LOGIN,
      mobile: formData.value.mobile
    })
    uni.$u.toast('发送成功')
    uCodeRef.value?.start()
  }
}

const changeLoginWay = (way: LoginWayEnum) => {
  formData.value.scene = way
}

const includeLoginWay = (way: LoginWayEnum) => {
  return appStore.getLoginConfig.login_way?.includes(String(way))
}

const inWxAuth = computed(() => {
  return appStore.getLoginConfig.wechat_auth
})

const isOpenAgreement = computed(() => appStore.getLoginConfig.login_agreement == 1)

const isOpenOtherAuth = computed(() => appStore.getLoginConfig.third_auth == 1)
const isForceBindMobile = computed(() => appStore.getLoginConfig.coerce_mobile == 1)

const loginFun = async () => {
  if (!isCheckAgreement.value && isOpenAgreement.value) return (showModel.value = true)
  if (formData.value.scene == LoginWayEnum.ACCOUNT) {
    if (!formData.value.mobile) return uni.$u.toast('请输入手机号码')
    if (!formData.value.password) return uni.$u.toast('请输入密码')
  }
  if (formData.value.scene == LoginWayEnum.MOBILE) {
    if (!formData.value.mobile) return uni.$u.toast('请输入手机号码')
    if (!formData.value.code) return uni.$u.toast('请输入验证码')
  }
  uni.showLoading({
    title: '请稍后...'
  })
  try {
    uni.setStorageSync('formDataS',formData.value)
  console.log('请稍后...',)
    await wxLoginGetCode();
  } catch (error: any) {
    uni.hideLoading()
    uni.$u.toast(error)
  }
}

const loginHandle = async (data: any) => {
  uni.$u.toast('登录成功11')
  const {token, mobile} = data
  if (!mobile && isForceBindMobile.value) {
    userStore.temToken = token
    router.navigateTo('/pages/bind_mobile/bind_mobile')
    uni.hideLoading()
    return
  }
  userStore.login(data.token)
  await userStore.getUser()
  uni.hideLoading()
  const pages = getCurrentPages()
  // 判断是否是新用户，是新用户则跳转到完成信息用户页面
  console.log('判断是否是新用户，是新用户则跳转到完成信息用户页面', data);
  if (data.is_new_user === 1) {
    cache.remove(BACK_URL)
    uni.reLaunch({
      url: '/packages/pages/register/identity'
    })
  } else {
    if (pages.length > 1) {
      const prevPage = pages[pages.length - 2]
      await router.navigateBack()
      // @ts-ignore
      const {onLoad, options} = prevPage
      // 刷新上一个页面
      onLoad && onLoad(options)
    } else if (cache.get(BACK_URL)) {
      try {
        if (cache.get(BACK_URL) == '/') {
          router.switchTab(cache.get(BACK_URL))
        } else {
          router.redirectTo(cache.get(BACK_URL))
        }
      } catch (error) {
        router.switchTab(cache.get(BACK_URL))
      }
    } else {
      router.reLaunch('/pages/index/index')
    }
    cache.remove(BACK_URL)
  }

}

const {lockFn: handleLogin} = useLockFn(loginFun)

const wxLoginGetCode = async () => {
  console.log('wxLoginGetCode',1111111)
  // #ifdef MP-WEIXIN
  uni.login({
    "provider": "weixin",
    "onlyAuthorize": true, // 微信登录仅请求授权认证
    success: async function (event) {
      const {code} = event
      formData.value.code = code
      console.log('code', code)
      uni.setStorageSync('code', code)
      const data = await login(formData.value)
      loginHandle(data)
    },
    fail: function (err) {
      uni.$u.toast(err)
      // 登录授权失败
      // err.code是错误码
    }
  })
  // #endif
  // #ifdef H5
  console.log('H5')
  if (isWeixin.value) {
    oaLogin()
  } else {
    // 非微信环境下，直接调用自研登录接口
    try {
      uni.showLoading({
        title: '请稍后...'
      })
      const data = await login(formData.value)
      loginHandle(data)
    } catch (error: any) {
      uni.hideLoading()
      uni.$u.toast(error.message || '登录失败，请重试')
    }
  }
  // #endif
}

const oaLogin = async (options: any = {getUrl: true}) => {
  const {code, getUrl} = options
  if (getUrl) {
    await wechatOa.getUrl(UrlScene.LOGIN)
  } else {
    const data = await login({
      ...formData.value,
      code
    })
    return data
  }
    // console.log('getUrl data', data);
    // router.redirectTo('/mobile/pages/user/user')
    // return data
  return Promise.reject()
}

const wxLogin = async () => {
  if (!isCheckAgreement.value && isOpenAgreement.value) {
    showModel.value = true
    console.log(showModel.value)
    return
  }

  // #ifdef MP-WEIXIN

  uni.showLoading({
    title: '请稍后11111111111111...'
  })
  try {
    const {code}: any = await uni.login({
      provider: 'weixin'
    })
    const data = await mnpLogin({
      code: code
    })
    loginData.value = data
    if (data.is_new_user) {
      uni.hideLoading()
      userStore.temToken = data.token
      showLoginPopup.value = true
      return
    }
    loginHandle(data)
  } catch (error: any) {
    uni.hideLoading()
    uni.$u.toast(error)
  }
  // #endif
  // #ifdef H5
  
  if (isWeixin.value) {
    oaLogin()
  }
  // #endif
}
const handleUpdateUser = async (value: any) => {
  await updateUser(value, {token: userStore.temToken})
  showLoginPopup.value = false
  loginHandle(loginData.value)
}

watch(
    () => appStore.getLoginConfig,
    (value) => {
      if (value.login_way) {
        formData.value.scene = value.login_way[0]
      }
    },
    {
      immediate: true
    }
)
const DisableStyle = computed(() => {
  if (formData.value.scene == 1 && formData.value.mobile && formData.value.password) {
    return true
  } else if (formData.value.scene == 2 && formData.value.mobile && formData.value.code) {
    return true
  } else {
    return false
  }
})

const removeWxQuery = () => {
  const options = route.query
  if (options.code && options.state) {
    delete options.code
    delete options.state
    router.redirectTo({path: route.path, query: options})
  }
}

onShow( async () => {
  //#ifdef H5
  const formDataS = await uni.getStorageSync('formDataS')
  if (formDataS) {
    formData.value = formDataS
  }
  const options = wechatOa.getAuthData()
  try {
    if (options.code && options.scene === UrlScene.LOGIN) {
      uni.showLoading({
        title: '请稍后...'
      })
      formData.value.code = options.code
      formData.value.scene = options.scene
      const data = await login(formData.value)
      if (data) {
        loginData.value = data

        loginHandle(loginData.value)
      }
    }
  } catch (error) {
    removeWxQuery()
  } finally {
    uni.hideLoading()
    //清除保存的授权数据
    wechatOa.setAuthData()
  }
  //#endif
})

onLoad(async (options:any) => {
  if (options.dis_id) {
    uni.setStorageSync('dis_id',options.dis_id)
  }
})
</script>

<style lang="scss">
page {
  background: #f5f5f5;
  height: 100%;
}

.text-color {
  color: var(--color-primary);
}

.login{
  background-color: #ffebfd;
}
</style>
